<template>
	<view class="wallet-container-wrapper">
		<!-- 余额 -->
		<view class="wallet-info">
			<view class="w-banner">
				<view class="w-tit">{{i18n.totalBalance}}</view>
				<view class="w-num">{{wxs.toPrice(balance)}}</view>
			</view>
			<view class="recharge-btn">
				<view class="btn" @tap="toRechargeBalance">{{i18n.recharge}}</view>
			</view>
		</view>
		<!-- 明细 -->
		<view class="wallet-detail">
			<view class="det-tit">{{i18n.balanceDetails}}</view>
			<view class="det-list">
				<view class="det-item" v-for="(item,index) in walletList" :key="index">
					<view class="det-lt">
						<image class="banner-icon" src="/static/images/icon/make-integral.png"></image>
						<view class="det-content">
							<!-- type 1:充值 2:赠送 3:支付 4:退款 5.平台充值 -->
							<view class="content">
								{{['',i18n.rechargeBalance,i18n.rechargeGift,i18n.shoppingConsumption,i18n.refund,i18n.platformChanges][item.type]}}
							</view>
							<view class="date">{{item.createTime}}</view>
						</view>
					</view>
					<view class="det-rt">
						<text
							:class="item.ioType == 0 ? 'gray' : 'red'">{{['-','+'][item.ioType]}}{{item.changeBalance}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 空 -->
		<view class="list-empty" v-if="!walletList.length">{{i18n.noBalanceDetails}}</view>
		<!-- 加载完成 -->
		<view class="all-load" v-if="walletList.length > 8 && loadAll">{{i18n.endTips}}</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="@/wxs/number.wxs"></script>

<script>
	var http = require("@/utils/http.js");
	export default {
		data() {
			return {
				balance: 0,
				walletList: [],
				current: 1,
				size: 20,
				pages: 1,
				loadAll: false,
			}
		},

		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onShow: function() {
			this.queryBalance() //请求余额
			this.queryWalletDetailed() //请求明细
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.current < this.pages) {
				this.setData({
					current: this.current + 1
				})
				this.queryWalletDetailed()
			} else {
				this.setData({
					loadAll: true
				})
			}
			console.log('明细列表：', this.walletList)
		},

		methods: {
			/**
			 * 请求余额
			 */
			queryBalance: function() {
				var params = {
					url: '/p/userBalance/getBalanceInfo',
					method: 'GET',
					data: {},
					callBack: res => {
						this.balance = res
					}
				};
				http.request(params)
			},


			/**
			 * 请求余额明细
			 */
			queryWalletDetailed: function() {
				var params = {
					url: '/p/userBalanceLog/log',
					method: 'GET',
					data: {
						current: this.current,
						size: this.size
					},
					callBack: res => {
						this.walletList = res.current == 1 ? res.records : this.walletList.concat(res.records)
						this.pages = res.pages
						this.current = res.current
					}
				};
				http.request(params)
			},


			// 跳转余额充值
			toRechargeBalance: function() {
				uni.navigateTo({
					url: '/packageUser/pages/rechargeBalance/rechargeBalance',
				});
			}

		}
	}
</script>

<style lang="scss">
	.wallet-container-wrapper {
		/* 余额 */
		.wallet-info {
			padding: 50rpx 20rpx;
			margin-bottom: 10rpx;
			background-image: linear-gradient(#e43130, #ec7070);

			.w-banner {
				text-align: center;
				font-size: 28rpx;
				line-height: 1.5em;
				color: #fff;

				.w-num {
					font-size: 46rpx;
					line-height: 2em;
				}
			}

			.recharge-btn {
				text-align: center;
				margin: 20rpx 0;

				.btn {
					display: inline-block;
					font-size: 30rpx;
					border-radius: 10rpx;
					padding: 10rpx 40rpx;
					color: #e53837;
					background: #fff;
				}
			}
		}

		/* 明细 */
		.wallet-detail {
			padding: 20rpx;

			.det-tit {
				font-size: 30rpx;
				margin-bottom: 30rpx;
				font-weight: bold;
			}

			.det-list {
				margin-bottom: 20rpx;

				.det-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0;

					&:not(:last-child) {
						border-bottom: 1px solid #f9f9f9;
					}

					.det-lt {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						.banner-icon {
							display: block;
							width: 50rpx;
							height: 50rpx;
							margin-right: 16rpx;
						}

						.det-content {
							font-size: 28rpx;
							line-height: 1.5em;

							.date {
								color: #bbb;
								font-size: 24rpx;
								line-height: 1.5em;
								padding-top: 8rpx;
							}
						}
					}

					.det-rt {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;


						.red {
							color: #e43130;
						}

						.gray {
							color: gray;
						}
					}
				}
			}
		}

		/* 空 */
		.list-empty {
			display: block;
			margin: 0 auto;
			margin-top: 60rpx;
			font-size: 28rpx;
			color: #ccc;
			line-height: 2em;
			text-align: center;
		}

		/* 加载完成 */
		.all-load {
			display: block;
			font-size: 28rpx;
			color: #ccc;
			margin-bottom: 40rpx;
			text-align: center;
		}
	}
</style>
